<template>
  <div class="container-setting">
    <div class="container-setting__header">
      <div class="container-setting__header__left iconfont" @click="toBack">
        &#xe84f;
      </div>
      <div class="container-setting__header__mid">设置</div>
      <div class="container-setting__header__right"></div>
    </div>
    <div class="container-setting__bottom">
      <div class="container-setting__bottom__top">
        <div
          class="container-setting__bottom__top__items"
          v-for="(item, index) of setItems"
          :key="index"
        >
          <div class="container-setting__bottom__top__items__left">
            {{ item.text }}
          </div>
          <div
            class="container-setting__bottom__top__items__right iconfont"
            v-html="item.rightIcon"
          ></div>
        </div>
      </div>
      <div class="container-setting__bottom__bottom">
        <button
          class="container-setting__bottom__bottom__btn"
          @click="exitLogin"
        >
          退出登录
        </button>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import storage from "../utils/storage";
import { useBackRouterEffect } from "../components/effects/backEffect";
const toBack = useBackRouterEffect();
const setItems = [
  {
    text: "我的银行卡",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "实名认证",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "帮助中心",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "意见反馈",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "清理缓存",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "关于我们",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "检测版本更新",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "医生注册协议",
    rightIcon: "&#xe7eb;",
  },
  {
    text: "法律声明与隐私政策",
    rightIcon: "&#xe7eb;",
  },
];
const router = useRouter();
function exitLogin() {
  storage.clearItem("userInfo");
  router.push("/login");
}
</script>
<style lang="scss" scoped>
.container-setting {
  font-size: 16rem;
  &__header {
    height: 88rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 44rem 20rem 0 20rem;
    background-color: #6481da;
    color: #fff;
    font-size: 20rem;
    // margin-bottom: 30rem;
  }
  &__bottom {
    &__top {
      background-color: #ffffff;
      padding: 30rem 0 20rem 0;
      &__items {
        padding: 18rem 20rem;
        display: flex;
        justify-content: space-between;
      }
    }
    &__bottom {
      width: 414rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 30rem;
      &__btn {
        width: 291rem;
        height: 47rem;
        background-color: #fff;
        font-size: 18rem;
        border-radius: 10rem;
      }
    }
  }
}
</style>
